<template>
    <div class="main">
        <div class="top-content" v-if="ppp">
            <van-nav-bar title="购物车" />
            <van-empty image="../../../static/images/cart01.png" image-size="80" description="购物车里面还是空空如也哟">
                <van-button round type="primary" class="bottom-button" @click="getGoodsEvt">去逛逛</van-button>
            </van-empty>
        </div>
        <div class="cart" v-else>
            <van-nav-bar title="购物车" right-text="" style="margin-bottom: 10px;" />
            <div class="top-container" style="margin-left: 8px;">
                <van-swipe-cell class="top" v-for="item in cartList" :key="item.id">
                    <ul class="cart-content">
                        <li class="cart-info">
                            <van-checkbox v-model="item.checked" style="width: 24px;"></van-checkbox>
                            <div class="image">
                                <img :src="'/api' + item.bgUrl" alt="">
                            </div>
                            <div class="right">
                                <div class="name">
                                    <p>{{ item.name }}</p>
                                </div>
                                <div class="describle">
                                    <p>{{ item.detailaddress }}</p>
                                </div>
                                <div class="price">
                                    <p>¥{{ item.price }}</p>
                                    <span class="la">
                                        <em @click="btnCount(item, 'minus')" ref="lal">-</em>
                                        <i>{{ item.count }}</i>
                                        <em @click="ggg(item)">+</em>
                                    </span>
                                    <!-- <div class="cilcle">
                                <van-icon class="ju" size="30" name="shopping-cart-o" />
                            </div> -->
                                </div>
                            </div>
                        </li>
                    </ul>
                    <template #right>
                        <van-button square text="删除" type="danger" style="height: 100%;" class="delete-button"
                            @click="deleteEvt(item)" />
                    </template>

                </van-swipe-cell>
            </div>

        </div>
        <div class="bottomContainer">
            <div class="word">
                <p>猜你喜欢</p>
            </div>
            <div class="content">
                <ul class="content-content">
                    <li class="cart-info" v-for="item in likeList" :key="item.id">
                        <div class="image">
                            <img :src="'/api' + item.itemsImg" alt="">
                        </div>
                        <div class="name">
                            <p>{{ item.name }}</p>
                        </div>
                        <div class="describle">
                            <p>{{ item.ipRightName }}</p>
                        </div>
                        <div class="price">
                            <p>¥{{ item.price }}</p>
                            <div class="cilcle">
                                <van-icon class="ju" size="22" name="shopping-cart-o" />
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell>
        <van-popup v-model:show="show">
            lalal
        </van-popup> -->
        <van-submit-bar :price="price" ref="submit" button-text="提交订单" @submit="onSubmit(item)">
            <van-checkbox v-model="checkedAll">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue'
import { useCounterStore } from '../../stores/users'
import Ajax from '../../api/axios';
import router from '../../router/index'
import { getPeripheryList } from '../../api/homeApi.js'
import { Toast } from 'vant';
const store = useCounterStore()

const lal = ref(null)
const likeList = ref([])
let ppp = ref(false)
let checkedAll = ref(false)
const cartList = ref([])
const submit = ref(null)
//mock的數據
// Array(4).fill().map((_, index) => ({
//     userid: 1,
//     goods_title: '云岚百香果1.5kg(单果50g起)',
//     goods_content: '果汁饱满 汁水充盈',
//     goods_price: (Math.random() * 100).toFixed(1),
//     goods_images: '',
//     is_checked: false
// }))
let iscartLIstChange = ref(false)
// 猜你喜欢
async function getLikeList() {
    const data = await getPeripheryList(1, 6)
    if (data.code === 200) {
        likeList.value = data.data.rows
        // console.log(likeList.value);
    }
}

watch(
    () => checkedAll.value,
    function (val) {
        if (!iscartLIstChange.value) {
            cartList.value.map(item => {
                item.checked = val
            })
        }
    }
)
watch(
    () => cartList.value,
    function (_arr) {
        checkedAll.value = _arr.every(item => item.checked)
        iscartLIstChange.value = true
        setTimeout(function () {
            iscartLIstChange.value = false
        })
    },
    {
        deep: true
    }
)
Ajax({
    url: '/cart/' + store.userInfo.id
}).then(d => {
    if (d.code === 200) {
        cartList.value = d.data
        if(d.data.length ===0){
            ppp.value = true
            console.log('>>>>>' +submit);
            // submit.setAttribute('disabled','')
        }
    }})

//添加商品
function btnCount(_row) {
    _row.count -= 1
    if (_row.count < 1) {
        _row.count = 1
    }


}

function ggg(_row) {
    _row.count += 1
}



//空购物车跳转到商品列表页
function getGoodsEvt() {
    router.push('/manzhan')
}

//删除选中的物品
function deleteEvt(item) {
    if (item.checked) {
        let ids = cartList.value.reduce((r, t) => {
            if (t.checked) r.push(t.id + '')
            return r
        }, [])
        Ajax({
            url: '/cart/delete',
            method: 'DELETE',
            data: {
                userId: store.userInfo.id,
                ids
            }
        }).then(d => {
            console.log(d);
            if (d.code === 200) {
                Ajax({
                    url: '/cart/' + store.userInfo.id
                }).then(d => {
                    console.log('>>>>>' + d.data.length)
                    if (d.code === 200) {
                        cartList.value = d.data
                        if (d.data.length === 0) {
                            ppp.value = true
                            console.log(ppp.value);
                        }
                    }
                })
            }
        })
    }

}
//计算价格
let price = computed(function () {
    return cartList.value.reduce((r, it) => {
        if (it.checked) r += it.price * it.count
        return r
    }, 0) * 100
})

//提交订单
function onSubmit() {
    // debugger
    let submitObj = {
        "userId": store.userInfo.id,
        "list": []
    }
    submitObj.list = cartList.value.reduce((r, it) => {
        if (it.checked) r.push(it.id + '')
        return r
    }, [])
    let ids = submitObj.list
 
    //提交完订单清空购物车
    Ajax({
        url: '/cart/delete',
        method: 'DELETE',
        data: {
            userId: store.userInfo.id,
            ids
        }
    }).then(d => {
        console.log(d);
        if (d.code === 200) {
            Ajax({
                url: '/cart/' + store.userInfo.id
            }).then(d => {
                console.log('>>>>>' + d.data.length)
                if (d.code === 200) {
                    Toast.success('订单提交成功')
                    cartList.value = d.data
                    if (d.data.length === 0) {
                        ppp.value = true
                        console.log(ppp.value);
                    }
                }
            })
        }
    })


    // router.push({path:'/home'})    
}

onMounted(() => {
    getLikeList()
    Ajax({
        url: '/cart/' + store.userInfo.id
    }).then(d => {
        if (d.code === 200) {
            cartList.value = d.data
            if (d.data.length === 0) {
                ppp.value = true
                // submit.setAttribute =('disabled','')
            }
        }
    })

})


// console.log(submitObj)

</script>

<style scoped lang="scss">
@import '../../styles/index.scss';

.main {
    background: $g05;
    overflow-x: hidden;

    .cart {
        .top-container::-webkit-scrollbar {
            width: 0 !important;
            height: 0;
        }

        .top-container {
            width: 360px;
            height: 200px;
            background-color: #ffffff;
            border-radius: 5px;
            overflow-x: hidden;
            background-color: $g05;
            border-bottom: 1px solid #fff;

            // display: none;
            .delete-button {
                right: -1px
            }

            .cart-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: #fff;


                .cart-info {
                    display: flex;
                    width: 100%;
                    height: 120px;
                    justify-content: center;
                    margin-bottom: 6px;
                    border-radius: 4px;
                    // background-color: $g05;

                    .image {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 60px;
                            height: 60px;
                        }
                    }

                    .right {
                        display: flex;
                        flex-direction: column;
                        margin-left: 10px;
                        justify-content: center;
                        width: 230px;

                        .name {
                            margin-bottom: 6px;
                            p {
                                // height: 40px;
                                font-size: 14px;
                                font-weight: 600;
                                color: $g03;
                                // overflow: hidden;
                                // text-overflow: ellipsis;
                            }
                        }
                        .describle {
                            border: 1px solid $g01;
                            border-radius: 8px;
                            background-color: #fefefe;
                            color: $g04;
                            width: 120px;
                            height: 24px;
                            margin-bottom: 6px;
                            display: flex;
                            align-items: center;
                            overflow: hidden;
                            p {
                                font-size: 14px;
                                height: 20px;
                                line-height: 18PX;
                                text-align: center;
                                margin: 0;
                            }
                        }
                        .price {
                            height: 22px;
                            width: 220px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            font-size: 18px;
                            .la {
                                >em {
                                    display: inline-block;
                                    vertical-align: middle;
                                    height: 22px;
                                    width: 22px;
                                    line-height: 22px;
                                    border-radius: 50%;
                                    text-align: center;
                                    color: white;
                                    background: $g01;
                                }
                                >i {
                                    display: inline-block;
                                    vertical-align: middle;
                                    text-align: center;
                                    font-style: normal;
                                    width: 30px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .bottom-button {
        background-color: #0dd693;
        width: 160px;
        height: 40px;
        margin: 0;
    }
    .van-submit-bar {
        bottom: 60px
    }
    .bottomContainer {
        background-color: $g05;
        .word {
            p {
                font-size: 20px;
                font-weight: 600;
                text-align: center;
                margin: 30px 10px 10px 10px;
            }
        }
        .content {
            .content-content {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .cart-info {
                    background-color: white;
                    width: 160px;
                    height: 240px;
                    border-radius: 6px;
                    margin-bottom: 10px;
                    overflow: hidden;
                    .image {
                        display: flex;
                        justify-content: center;
                        margin-bottom: 10px;
                        img {
                            width: 100px;
                            height: 100px;
                        }
                    }
                    .name {
                        margin-bottom: 10px;
                        p {
                            font-size: 14px;
                            font-weight: 600;
                            color: $g03;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 100%;
                            height: 30px;
                        }
                    }
                    .describle {
                        border: 1px solid #d7d7d7;
                        border-radius: 4px;
                        background-color: #fefefe;
                        color: $g04;
                        width: 120px;
                        height: 24px;
                        margin-bottom: 10px;
                        overflow: hidden;
                        p {
                            font-size: 14px;
                            height: 20px;
                            line-height: 24PX;
                            text-align: center;
                            margin: 0;
                        }
                    }
                    .price {
                        height: 30px;
                        width: 120px;
                        display: flex;
                        justify-content: space-between;

                        p {
                            font-size: 20px;
                            color: #dd9180;
                        }
                        .cilcle {
                            height: 22px;
                            width: 22px;
                            border-radius: 50%;
                            background-color: $g01;
                            display: flex;
                            justify-content: space-around;
                            // .ju {

                            // }
                        }
                    }
                }
            }

        }
    }
}
</style>